import * as React from 'react';

import styles from './styles.module.scss';

interface Props {
    name?: string;
    color?: string;
}

const iconsData = {
    copy:
        'M4.1928 5.17974C4.75285 3.33198 6.46935 1.98694 8.5 1.98694H10.5C12.9853 1.98694 15 4.00166 15 6.48694C15 8.51759 13.655 10.2341 11.8072 10.7941C11.2472 12.6419 9.53065 13.9869 7.5 13.9869H5.5C3.01472 13.9869 1 11.9722 1 9.48694C1 7.45629 2.34504 5.73979 4.1928 5.17974ZM4.0964 7.41785C3.43467 7.86761 3 8.62651 3 9.48694C3 10.8677 4.11929 11.9869 5.5 11.9869H7.5C8.31791 11.9869 9.04408 11.5942 9.50018 10.9869H8.5C6.33387 10.9869 4.52521 9.45644 4.0964 7.41785ZM9.94999 8.98694H8.5C7.29052 8.98694 6.28164 8.12806 6.05001 6.98694H7.5C8.70948 6.98694 9.71836 7.84582 9.94999 8.98694ZM11.9036 8.55603C11.4748 6.51743 9.66613 4.98694 7.5 4.98694H6.49982C6.95592 4.37972 7.68209 3.98694 8.5 3.98694H10.5C11.8807 3.98694 13 5.10623 13 6.48694C13 7.34736 12.5653 8.10626 11.9036 8.55603Z',
    upload:
        'M3 9C3.55228 9 4 9.44772 4 10V12H12V10C12 9.44772 12.4477 9 13 9C13.5523 9 14 9.44772 14 10V12C14 13.1046 13.1046 14 12 14H4C2.89543 14 2 13.1046 2 12V10C2 9.44772 2.44772 9 3 9Z M8 9.9873C7.44772 9.9873 7 9.53959 7 8.9873L7 5.28852L5.68232 6.51836C5.27857 6.89519 4.64578 6.87337 4.26894 6.46962C3.89211 6.06587 3.91393 5.43308 4.31768 5.05625L7.31768 2.25625C7.70189 1.89766 8.29811 1.89766 8.68232 2.25625L11.6823 5.05625C12.0861 5.43308 12.1079 6.06587 11.7311 6.46962C11.3542 6.87337 10.7214 6.89519 10.3177 6.51836L9 5.28852V8.9873C9 9.53959 8.55228 9.9873 8 9.9873Z',
    image:
        'M0 5.00012C0 2.79098 1.79086 1.00012 4 1.00012H12C14.2091 1.00012 16 2.79098 16 5.00012V11.0001C16 13.2093 14.2091 15.0001 12 15.0001H4C1.79086 15.0001 0 13.2093 0 11.0001V5.00012ZM12.173 11.9872H3.82681C3.17958 11.9872 2.78411 11.2991 3.12543 10.7668L5.30707 7.36483C5.60942 6.89335 6.30406 6.85643 6.65793 7.29303L8.71907 9.83606L9.68099 8.53799C9.99891 8.10897 10.6517 8.09104 10.9942 8.50192L12.8154 10.6865C13.2511 11.2091 12.8667 11.9872 12.173 11.9872ZM9.5 6.98718C10.3284 6.98718 11 6.31561 11 5.48718C11 4.65876 10.3284 3.98718 9.5 3.98718C8.67157 3.98718 8 4.65876 8 5.48718C8 6.31561 8.67157 6.98718 9.5 6.98718Z',
    reset:
        'M4 8C4 5.79086 5.79086 4 8 4C10.2091 4 12 5.79086 12 8H11.4142C10.5233 8 10.0771 9.07714 10.7071 9.70711L12.2929 11.2929C12.6834 11.6834 13.3166 11.6834 13.7071 11.2929L15.2929 9.70711C15.9229 9.07714 15.4767 8 14.5858 8H14C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14C8.55228 14 9 13.5523 9 13C9 12.4477 8.55228 12 8 12C5.79086 12 4 10.2091 4 8Z',
    reject:
        'M3 12C3 11.4477 3.44772 11 4 11H12C12.5523 11 13 11.4477 13 12C13 12.5523 12.5523 13 12 13H4C3.44772 13 3 12.5523 3 12Z M9.50956 8.99997H6.49044C4.73637 8.99997 3.85933 8.99997 3.5657 8.52915C3.50738 8.43564 3.46492 8.33313 3.44004 8.22577C3.31475 7.68522 3.93491 7.06507 5.17522 5.82475L6.68478 4.31519C7.25573 3.74424 7.54121 3.45876 7.89027 3.42022C7.9632 3.41217 8.0368 3.41217 8.10973 3.42022C8.45879 3.45876 8.74427 3.74424 9.31522 4.31519L10.8248 5.82475C12.0651 7.06507 12.6853 7.68522 12.56 8.22577C12.5351 8.33313 12.4926 8.43564 12.4343 8.52915C12.1407 8.99997 11.2636 8.99997 9.50956 8.99997Z',
    save:
        'M3 9C3.55228 9 4 9.44772 4 10V12H12V10C12 9.44772 12.4477 9 13 9C13.5523 9 14 9.44772 14 10V12C14 13.1046 13.1046 14 12 14H4C2.89543 14 2 13.1046 2 12V10C2 9.44772 2.44772 9 3 9Z M8 1.9873C8.55229 1.9873 9 2.43502 9 2.9873L9 6.68609L10.3177 5.45625C10.7214 5.07942 11.3542 5.10124 11.7311 5.50499C12.1079 5.90874 12.0861 6.54153 11.6823 6.91836L8.68232 9.71836C8.29811 10.077 7.70189 10.077 7.31769 9.71836L4.31769 6.91836C3.91393 6.54153 3.89211 5.90874 4.26895 5.50499C4.64578 5.10123 5.27857 5.07942 5.68232 5.45625L7 6.68609V2.9873C7 2.43502 7.44772 1.9873 8 1.9873Z',
};

const Icon: React.FC<Props> = props => {
    return (
        <i className={styles.wrap}>
            <svg
                width="100%"
                height="100%"
                fillRule="evenodd"
                clipRule="evenodd"
                viewBox="0 0 16 16"
                fill={props.color}
            >
                <path d={iconsData[props.name]} />
            </svg>
        </i>
    );
};

Icon.defaultProps = {
    name: 'copy',
    color: '#000',
} as Partial<Props>;

export default Icon;
